<template>
  <div>
	<div>
		<header  class="mint-header is-fixed">
		<div class="mint-header-button is-left" @click="$router.back(-1)">
			<button  class="mint-button header-icon mint-button--default mint-button--normal"><span class="mint-button-icon"><i class="mintui mintui-back"></i></span><label class="mint-button-text"></label></button>
		</div>
		<h1 class="mint-header-title">注册</h1>
		<div class="mint-header-button is-right">
		</div>
		</header>
	</div>
	<div  class="wrapper">
		<div  class="padding-header relative">
			<div  class="form-wrap form-padding">
				<ul >
					<li  class="clearfix">
					<div  class="iptBox long">
						<input  type="tel" placeholder="请输入手机号"  maxlength="11" name="phone" v-model="mobile"><i  class="icon iconfont icon-mobile"></i>
					</div>
					</li>
					<li  class="clearfix">
					<div  class="iptBox middle">
						<input  type="number" placeholder="请输入验证码"  name="code" v-model="code" ><i  class="icon iconfont icon-code"></i>
					</div>
					<div  class="iptBox short">
						<button @click="sendCode" v-if="timeer==0">获取验证码</button><button  class="grayBg" v-else>{{timeer}}s后可重新发送</button>
					</div>
					</li>
              
					<li  class="gradeItem" :class="{'active':currentIndex == 0}" v-if="MemberPriceList && MemberPriceList.length>0" @click="memberTypeFn(0)">
                        <i  class="icon iconfont icon-checked-fill"></i><label>会员费用</label><span >￥{{MemberPriceList[0].price}}</span>   
                    </li>
					<li  class="gradeItem" :class="{'active':currentIndex == 1}" v-if="MemberPriceList && MemberPriceList.length>0" @click="memberTypeFn(1)"><i  class="icon iconfont icon-checked-fill"></i><label >VIP费用</label><span >￥{{MemberPriceList[1].price}}</span></li>
					<li  class="payMethod active"><i  class="icon iconfont icon-checked-fill active"></i><span ><i  class="icon iconfont icon-wechat"></i><label >微信支付</label><em >（默认）</em></span></li>
					<li  class="clearfix">
					<div  class="iptBox long" @click="regFn">
						<span  class="sureBtn active">立即注册</span>
					</div>
					<div  style="clear: both;">
					</div>
					</li>
					<!---->
				</ul>
			</div>
		</div>
		<input  type="hidden">
	</div>
</div>
</template>

<script>
import { RegistUrl,SmsValidCodeUrl,MemberPriceUrl,UnifiedOrder,OrderQuery,ConfigJs,MiniLogin } from "@/api/login";
import { Toast } from 'vant';
export default {
  name: "Index",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
	  bannerList: [],
	  page:1,
	pageSize:100,
	traderType:"",
	cityId:"",
	orderNum:false,
	Latitude:"",
	Longitude:"",
	memberType:0,
    currentIndex:0,
    timeer: 0,
    count: 60,//短信验证码发送间隔时间设置
	mobile:"",
	code:"",
	newcode:"",
    MemberPriceList:[]
    };
  },
  created(){
      //var vConsole = new VConsole();
      //localStorage.setItem("userinfo")
     this.getConfig()
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
        MemberPriceUrl().then(res=>{
            console.log(res);
           if(res.data.errCode == 0){
               this.MemberPriceList = res.data.data;
           }
        },error=>{
            Toast(res.data.errMsg);
            return
        })
    },
    //会员切换
    memberTypeFn(index){
        console.log(index);
        this.currentIndex = index;
        this.memberType = index;
    },
    //点击注册
    regFn(){
        if (!this.mobile) {
            Toast('请填写手机号');
            return
        }
        if (!this.code) {
            Toast('请填写验证码');
            return
        }
        RegistUrl({
            mobile:this.mobile,
            code:this.code,
            memberType:this.memberType,
            openId:window.localStorage.getItem("openId")
        }).then(res=>{
            console.log(res);
           if(res.data.errCode == 0){
               //Toast("注册成功");
                this.payinfo=res.data.data
                this.pay()
           }
        },error=>{
            //Toast(res.data.errMsg);
            return
        })
    },
    // getPayinfo(){
    //   UnifiedOrder(2).then(res=>{
      
    //     if(res.data.Data!=null){
    //       this.payinfo=res.data.Data
    //       this.pay()
    //     }
    //   })
    // },
    pay(){
        console.log(this.payinfo);
     let that=this
      wx.chooseWXPay({
        appId:'wx9b4743a1848616d3',      
        timestamp: this.payinfo.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: this.payinfo.nonceStr, // 支付签名随机串，不长于 32 位
        package: this.payinfo.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: this.payinfo.paySign, // 支付签名
        success: function (res) {
            // 支付成功后的回调函数
            console.log(res);
            that.orderQuery();
        },
        cancel: function(res) {
            console.log(res);
        },
        fail:function(res){
            console.log(res);
            //支付失败
        }
      });
    },
    getConfig(){
      ConfigJs(window.location.href).then((res)=>{
          console.log(res);
        let data=res.data.data
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId:'wx9b4743a1848616d3', // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名
            jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
        });
      })
    },
    orderQuery(){
        var that=this;
      OrderQuery(this.payinfo.outNo).then(res=>{
          console.log(res);
           if (res.data.data!='支付成功'){
                setTimeout(function(){
                    that.orderQuery()
                },2000);
            }else{
                //Toast(res.data.data);
                
           }  
            if(window.localStorage.getItem("openId")){
                that.getToken();
            }
        //    setTimeout(function(){
        //     that.$router.push('/my');
        //     },4000);
      })
    },
    getToken(){
        MiniLogin({
            openId:window.localStorage.getItem("openId")
        }).then(res=>{
            console.log(res);
            if(res.data.errCode == 0){
                //this.MemberPriceList = res.data.data;
            }
            },error=>{
                Toast(res.data.errMsg);
                return
            }
        );
    },
    //发送验证码
    sendCode() {
        console.log(111);
        console.log(this.mobile);
        if (!this.mobile) {
            Toast('请填写手机号');
            return
        }
        var _this = this;
        this.timeer = this.count;
        var coutnnum = setInterval(function () {
            if (_this.timeer == 0) {
                clearInterval(coutnnum);
                return false;
            } else {
                _this.timeer = _this.timeer -= 1;
            }
        }, '1000');
        SmsValidCodeUrl({
            mobile:this.mobile,
            smsType:0
        }).then(ret=>{
            console.log(ret);
            if(ret.errCode == 0){
                this.code = ret.data;
            }
        });
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mint-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #26a2ff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    height: 40px;
    line-height: 1;
    padding: 0 10px;
    position: relative;
    text-align: center;
    white-space: nowrap;
}
.mint-header.is-fixed {
    top: 0;
    right: 0;
    left: 0;
    position: fixed;
    z-index: 1;
}
.mint-header[data-v-48f5980a] {
    height: 1.32rem;
    font-size: .44rem;
    background: -webkit-gradient(linear,left top,right top,from(#0af),to(#0085ff));
    background: linear-gradient(90deg,#0af,#0085ff);
    color: #fff;
}
.mint-header-button {
    -webkit-box-flex: .5;
    -ms-flex: .5;
    flex: .5;
}
.mint-header-button.is-left {
    text-align: left;
}
.mint-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
    border: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: block;
    font-size: 18px;
    height: 41px;
    outline: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.mint-button--default {
    color: #656b79;
    background-color: #f6f8fa;
    -webkit-box-shadow: 0 0 1px #b8bbbf;
    box-shadow: 0 0 1px #b8bbbf;
}
.mint-button--normal, .mint-button--small {
    display: inline-block;
    padding: 0 12px;
}
.mint-header .mint-button {
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: inherit;
    display: inline-block;
    padding: 0;
    font-size: inherit;
}
.header-icon[data-v-48f5980a] {
    color: #fff;
}
.mint-button-icon {
    vertical-align: middle;
    display: inline-block;
}
.header-icon[data-v-48f5980a] {
    color: #fff;
}
.mintui {
    font-family: mintui!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: .2px;
    -moz-osx-font-smoothing: grayscale;
}
.mint-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    font-weight: 400;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.mint-header-button {
    -webkit-box-flex: .5;
    -ms-flex: .5;
    flex: .5;
}
.mint-header-button.is-right {
    text-align: right;
}
.wrapper {
    position: fixed;
    top: 1.32rem;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.form-wrap, .wrapper {
    background: -webkit-gradient(linear,left top,left bottom,from(#f1f1f1),to(#f7f7f7));
    background: linear-gradient(180deg,#f1f1f1,#f7f7f7);
}
.relative {
    position: relative;
}
.form-wrap, .wrapper {
    background: -webkit-gradient(linear,left top,left bottom,from(#f1f1f1),to(#f7f7f7));
    background: linear-gradient(180deg,#f1f1f1,#f7f7f7);
}
.form-wrap {
    display: block;
    width: 100%;
    padding-top: 1.32rem;
}
.form-wrap ul {
    height: auto;
    padding: 0 .44rem;
}
.clearfix {
    *zoom: 1;
}
.form-wrap li {
    width: 100%;
    margin: 0 0 .5rem;
    -webkit-box-shadow: 0 1px 8px rgba(0,0,0,.05);
    box-shadow: 0 1px 8px rgba(0,0,0,.05);
}
.form-wrap li .iptBox {
    height: 1.2rem;
    position: relative;
    float: left;
}
.form-wrap li .iptBox.long {
    width: 9.92rem;
}
.form-wrap li .iptBox input, .form-wrap li .iptBox select {
    width: 100%;
    height: 1.2rem;
    background: #fff;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: .2rem;
    font-size: .36rem;
    float: left;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.form-wrap li .iptBox i {
    font-size: .42rem;
    position: absolute;
    top: 50%;
    right: .2rem;
    margin-top: -.21rem;
    color: #9c9c9c;
}
.form-wrap li .iptBox.middle {
    width: 6.02rem;
}
.form-wrap li .iptBox input, .form-wrap li .iptBox select {
    width: 100%;
    height: 1.2rem;
    background: #fff;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: .2rem;
    font-size: .36rem;
    float: left;
}
.form-wrap li .iptBox.short {
    width: 3.7rem;
    margin-left: .2rem;
}
.form-wrap li .iptBox button {
    width: 100%;
    height: 1.2rem;
    color: #fff;
    background: linear-gradient(35deg,#0085ff,#0af);
    border: none;
    padding: 0;
    font-size: .36rem;
    border-radius: 3px;
    cursor: pointer;
    float: left;
}.form-wrap li .iptBox button {
    width: 100%;
    height: 1.2rem;
    color: #fff;
    background: linear-gradient(35deg,#0085ff,#0af);
    border: none;
    padding: 0;
    font-size: .36rem;
    border-radius: 3px;
    cursor: pointer;
    float: left;
}
.form-wrap li .iptBox button.grayBg {
    background: linear-gradient(35deg,#6f7ecf,#99ceff);
}
.form-wrap li {
    width: 100%;
    margin: 0 0 .5rem;
    -webkit-box-shadow: 0 1px 8px rgba(0,0,0,.05);
    box-shadow: 0 1px 8px rgba(0,0,0,.05);
}
.form-wrap li.gradeItem {
    width: auto;
    height: 1.2rem;
    border-radius: 5px;
    font-size: .36rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 .2rem;
}
.form-wrap li.gradeItem.active {
    background-color: #fff;
}
.form-wrap li.gradeItem i {
    font-size: .64rem;
    padding-left: 2px;
    margin-top: -2px;
    color: #b6b6b6;
}
.form-wrap li.gradeItem.active i {
    color: #0085ff;
}
.form-wrap li.gradeItem label {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: .2rem;
}
.form-wrap li.gradeItem span {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    text-align: right;
    color: #0085ff;
    font-size: .42rem;
}
.form-wrap li.gradeItem label {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: .2rem;
}
.form-wrap li.gradeItem span {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    text-align: right;
    color: #0085ff;
    font-size: .42rem;
}
.form-wrap li.payMethod {
    height: 1.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: .36rem;
    width: auto;
    border-radius: 5px;
    margin-top: .2rem;
    background-color: #fff;
    padding: 0 .2rem;
}
.form-wrap li.payMethod i.icon-checked-fill.active {
    color: #09bb07;
}
.form-wrap li.payMethod span i {
    color: #09bb07;
    font-size: .64rem;
}
.form-wrap li .iptBox span.sureBtn {
    font-size: .42rem;
    background: #d5d5d5;
    color: #666;
    letter-spacing: 2px;
}
.form-wrap li .iptBox span.sureBtn.active {
    color: #fff;
    background: linear-gradient(35deg,#9000ff,#ff6d00);
}
.form-wrap li .iptBox span {
    display: block;
    width: 100%;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(35deg,#0085ff,#0af);
    border: none;
    padding: 0;
    font-size: .36rem;
    border-radius: 3px;
    cursor: pointer;
}
</style>
